<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>命名路由</title>
    <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
      <router-link to="/user/a001">to a001</router-link>
      <router-link :to="{name: 'user', params: {userId: 'b002'}}">to b002</router-link>
      <router-view></router-view>
    </div>

    <script type="text/javascript">
      
      const User = {template: '<div>User: {{$route.params.userId}}</div>'}
      
      const router = new VueRouter({
        routes: [
          {name: 'user', path: '/user/:userId', component: User}
        ]
      })
      
      const vm = new Vue({
        router
      }).$mount('#app1')
      
      vm.$router.push({name: 'user', params: {userId: 'c003'}})
    </script>
  </body>
</html>